<template>
	<div>
<div class="Search">
	<input type="text" class="search-input" placeholder="输入城市名或拼音" v-model="keyword"/>
</div>
	<div 
		class="search-content"
		ref="search"
		v-show="keyword"
		>
		<ul>
			<li v-for="item of list" class="search-item border-bottom" :key="item.id" @click='handleCityClick(item.name)'>{{item.name}}</li>
		
			<li class="search-item border-bottom" v-show='hasNoData'>
				没有找到匹配数据
				
			</li>
		</ul>	
		
	</div>
	
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default {
		name: 'CitySearch',
		props: {
			cities: Object
		},
		data () {
			return	 {
				keyword:'',
				list: [],
				timer: null
			}
		},
		methods: {
			handleCityClick(city) {
			this.$store.commit('changeCity',city)
			this.$router.push('/')
			}
		},
		computed: {
			hasNoData () {
				return !this.list.length
			}
		},
		watch: {
			keyword () {
				if (this.timer) {
					clearTimeout(this.timer)
				}
				if(!this.keyword) {
					this.list= [];
					
					return
				}
				this.timer = setTimeout( () => {
					const result =[];
					
					for(let i in this.cities) {
						this.cities[i].forEach((value) => {
							 if(value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1) {
							 	result.push(value)
							 }
						})
					}
					
					this.list = result;
					console.log(this.cities)
					console.log(this.list)
				},100)
			}
		},
		mounted () {
			this.scroll = new BScroll(this.$refs.search)
		}
	}
</script>

<style lang="stylus" scoped="scoped">
	@import '~styles/varibles.styl'
	.Search
	  height: .72rem;
	  padding: 0 .1rem;
	  background: $bgColor;
	  .search-input
	    box-sizing:border-box
	    width: 100%;
	    height: .62rem;
	    line-height: .62rem;
	    text-align: center;
	    border-radius:0.06rem;
	    color: #666;
	    padding: 0 0.1rem;
	
	.search-content
		position: absolute;
		top: 1.58rem;
		left: 0;
		right: 0;
		bottom: 0;
		background: #eee;
		z-index:1;
		.search-item
			line-height: .62rem;
			padding-left: .2rem;
			color: #666;
			background: #fff;
</style>